<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="<%=basePath%>/css/hm.css" rel="stylesheet" />
<link href="<%=basePath%>/css/sweetalert.css" rel="stylesheet" />

<script type="text/javascript" src="<%=basePath%>/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/weui/jquery-weui.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/sweetalert.min.js"></script>
<title>汉宁红木-红木知识等级考试</title>
<style>
html,body{   
  height:100%;  
  margin:0px;  
  background-color: #951201;
}
h1{
  margin:0px;  
}
body{
	position:relative;
	box-sizing:border-box;
	/* padding:10px */ 
	background-color: #951201;
	background-attachment:scroll;
	background-image:url(<%=basePath %>/images/wenjuan/beijing.png);
	background-size:auto 100% ;
	/* background-repeat:no-repeat; */
	background-position:center 0; 
}
.hm-main-body{
	position: absolute;
	top: 50%;
	/* border: 1px dashed #ddd; */
	/* 这里有兼容性问题 */
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);

	width:100%;
	box-sizing:border-box;
	/* border:2px #fff solid; */
}
.hm-main-logo{

	background-attachment:scroll;
	background-image:url(<%=basePath %>/images/wenjuan/logo2.png);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:center 0;

	/* position:absolute; */
	/* top:10%;
	left:0; */
	display:inline-block;
	width:100%;
	height:150px;
	color:#fff;
	text-align:center;
}
.hm-main-shanzi{

	background-attachment:scroll;
	background-image:url(<%=basePath %>/images/wenjuan/shanzi.png);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:center 0;
	margin:15px auto;
	/* position:absolute;
	top:20%;
	left:0; */
	display:inline-block;
	width:100%;
	height:150px;
	color:#fff;
	text-align:center;
}

.hm-main-title{
	<%-- background-attachment:scroll;
	background-image:url(<%=basePath %>/images/wenjuan/title.png);
	background-size:auto 100%;
	background-repeat:no-repeat;
	background-position:left 0; --%>

	margin:15px auto;
	/* position:absolute;
	top: 42%;
	left:0; */
	display:inline-block;
	width:100%; 
	height:50px;
	color:#fff;
	text-align:center;
	font-family:"NSimSun";
}
.hm-main-title img{
	display:inline-block;
	height:40px;
	vertical-align:middle;
	width:auto;
}
.hm-main-title:after{
	display:inline-block;
	font-size:25px;
	height:40px;
	vertical-align:middle;
	line-height:40px;
}
.hm-main-title.num1:after{
	content:"【一】"
}
.hm-main-title.num2:after{
	content:"【二】"
}
.hm-main-title.num3:after{
	content:"【三】"
}
.hm-main-content{
	margin:15px auto;
/* 	position:absolute; 
	top:60%;
	left:0;*/
	display:inline-block;
	width:100%;
	text-align:center
}
.hm-main-tl,.hm-main-tr,.hm-main-bl,.hm-main-br{
	width:28px;height:34px;position:absolute;
	overflow:hidden;
	background-image:url(<%=basePath %>/images/wenjuan/mtl.png);
	background-size:28px 34px;
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-origin:content-box;
}
.hm-main-tl{
	top:-5px;left:-5px; 
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}
.hm-main-tr{
	top:-5px;right:-5px; 
    transform: rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	/* transform:rotate(90deg); */
}
.hm-main-bl{
	bottom:-5px;left:-5px; 
	transform:rotate(0deg);
	transform: rotateX(180deg); 
	-webkit-transform:rotateX(180deg); 
}
.hm-main-br{
	bottom:-5px;right:-5px; 
	transform: rotateX(180deg) rotateY(180deg);
	-webkit-transform:rotateX(180deg) rotateY(180deg);
}

.hm-main-btn{
	display:inline-block;
	text-align:center;
	margin:0 auto;
	width:200px;
	height:50px;
	line-height:50px;
	font-size:30px;
	color:#5e2702;
	background:#fff;
	border:1px #000 solid;
	border-radius:20px;
}
.hm-main-btn-active{
	color:#fff;
	background:#5e2702;
}
</style>
<script type="text/javascript">

function question(){
	$('.hm-main-btn').css({
		color:'#fff'
		,background:'#951201'
	});
	window.location.href="<%=basePath %>/question.htm?type="+'${type}';
}
</script>

</head>
<body>
		<div class="hm-main-body">
<!-- 			<div class="hm-main-tl"></div>
			<div class="hm-main-tr"></div>
			<div class="hm-main-bl"></div>
			<div class="hm-main-br"></div> -->
			<div class="hm-main-logo"></div>
			<c:if test="${type==0||type==null||type=='' }">
			<div class="hm-main-title num1">
			<img alt="" src="<%=basePath %>/images/wenjuan/title.png">
			</div> 
			</c:if>
			<c:if test="${type==1 }">
			<div class="hm-main-title num2"></div> 
			</c:if>
			<c:if test="${type==2 }">
			<div class="hm-main-title num3"></div> 
			</c:if>
			<div class="hm-main-shanzi"></div>
			<div class="hm-main-content">
				<div class="hm-main-btn" style="margin-bottom:10px" onclick="question()">
				开始考试
				</div>
				
				<p style="color:#fff">已有${countPlayers }人参与答题</p>
			</div>
		</div>
</body>
</html>